import type { DescriptionsProps } from 'antd';
import { Button, Card, Descriptions } from 'antd';
import { useEffect, useState } from 'react';
import { useStore } from 'zustand';

import dashboardApi from '@/api/dashboardApi';
import { useCharts } from '@/hooks/useCharts';
import { useUserStore } from '@/store/index';
import { IDashboard } from '@/types/api';
import { formatMoney, formatNum, formatState } from '@/utils/index';

import styles from './index.module.less';

const DashBoard = () => {
    /* 数据管理--------------------------------------------------- */
    const userInfo = useStore(useUserStore, (state) => state.userInfo);
    const [report, setReport] = useState<IDashboard.ReportData>();
    const [lineRef, lineChart] = useCharts();
    const [pieCityRef, pieCityChart] = useCharts();
    const [pieAgeRef, pieAgeChart] = useCharts();
    const [radarRef, radarChart] = useCharts();
    const descriptionItems: DescriptionsProps['items'] = [
        {
            key: 'userId',
            label: '用户ID',
            children: userInfo.userId
        },
        {
            key: 'userEmail',
            label: '邮箱',
            children: userInfo.userEmail
        },
        {
            key: 'state',
            label: '状态',
            children: formatState(userInfo.state)
        },
        {
            key: 'mobile',
            label: '手机号',
            children: userInfo.mobile
        },
        {
            key: 'job',
            label: '岗位',
            children: userInfo.job
        },
        {
            key: 'deptName',
            label: '部门',
            children: userInfo.deptName
        }
    ];

    /* hooks ---------------------------------------------------- */
    useEffect(() => {
        getReportData();
    }, []);

    useEffect(() => {
        renderLineChart();
        renderPieCityChart();
        renderPieAgeChart();
        renderRadarChart();
    }, [lineChart, pieCityChart, pieAgeChart, radarChart]);

    /* 函数定义 ---------------------------------------------------*/
    /**
     * 异步获取报告数据
     */
    const getReportData = async () => {
        const { data } = await dashboardApi.getReportData();
        setReport(data);
    };

    /**
     * 异步渲染折线图
     */
    const renderLineChart = async () => {
        if (!lineChart) return;
        const { data } = await dashboardApi.getLineData();
        lineChart.setOption({
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['订单', '流水']
            },
            grid: {
                left: 50,
                right: 50,
                bottom: 20
            },
            xAxis: {
                data: data.label
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '订单',
                    type: 'line',
                    data: data.order
                },
                {
                    name: '流水',
                    type: 'line',
                    data: data.money
                }
            ]
        });
    };

    /**
     * 异步渲染城市分布饼状图
     */
    const renderPieCityChart = async () => {
        if (!pieCityChart) return;
        const { data } = await dashboardApi.getPieCityData();
        pieCityChart.setOption({
            title: {
                text: '司机城市分布',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                    name: '城市分布',
                    type: 'pie',
                    radius: '50%',
                    data
                }
            ]
        });
    };

    /**
     * 异步渲染年龄分布饼状图
     */
    const renderPieAgeChart = async () => {
        if (!pieAgeChart) return;
        const { data } = await dashboardApi.getPieAgeData();
        pieAgeChart.setOption({
            title: {
                text: '司机年龄分布',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                    name: '年龄分布',
                    type: 'pie',
                    roseType: 'area',
                    radius: [50, 180],
                    data
                }
            ]
        });
    };

    /**
     * 异步渲染雷达图
     */
    const renderRadarChart = async () => {
        if (!radarChart) return;
        const { data } = await dashboardApi.getRadarData();
        radarChart.setOption({
            legend: {
                data: ['司机模型诊断'],
                left: 'left'
            },
            tooltip: {
                trigger: 'item'
            },
            radar: {
                indicator: data.indicator
            },
            series: [
                {
                    name: '模型诊断',
                    type: 'radar',
                    data: data.data
                }
            ]
        });
    };

    /**
     * 城市分布饼状图和年龄分布饼状图刷新操作
     */
    const handleRefresh = () => {
        renderPieCityChart();
        renderPieAgeChart();
    };

    return (
        <div className={styles.dashboard}>
            {/* 工作台个人信息 */}
            <div className={styles.userInfo}>
                <img
                    src={userInfo.userImg}
                    className={styles.userImg}
                />
                <Descriptions
                    title="欢迎新同学，每天都要开心！"
                    items={descriptionItems}
                />
            </div>

            {/* 工作台汇总数据 */}
            <div className={styles.report}>
                <div className={styles.card}>
                    <div className="title">司机数量</div>
                    <div className={styles.data}>{formatNum(report?.driverCount)}个</div>
                </div>
                <div className={styles.card}>
                    <div className="title">总流水</div>
                    <div className={styles.data}>{formatMoney(report?.totalMoney)}元</div>
                </div>
                <div className={styles.card}>
                    <div className="title">总订单</div>
                    <div className={styles.data}>{formatNum(report?.orderCount)}单</div>
                </div>
                <div className={styles.card}>
                    <div className="title">开通城市</div>
                    <div className={styles.data}>{formatNum(report?.cityNum)}座</div>
                </div>
            </div>

            {/* 图表 */}
            <div className={styles.chart}>
                <Card
                    title="订单和流水走势图"
                    extra={
                        <Button
                            type="primary"
                            onClick={renderLineChart}
                        >
                            刷新
                        </Button>
                    }
                >
                    <div
                        ref={lineRef}
                        className={styles.chartItem}
                    />
                </Card>
            </div>
            <div className={styles.chart}>
                <Card
                    title="司机分布"
                    extra={
                        <Button
                            type="primary"
                            onClick={handleRefresh}
                        >
                            刷新
                        </Button>
                    }
                >
                    <div className={styles.pieChart}>
                        <div
                            ref={pieCityRef}
                            className={styles.pieItem}
                        />
                        <div
                            ref={pieAgeRef}
                            className={styles.pieItem}
                        />
                    </div>
                </Card>
            </div>
            <div className={styles.chart}>
                <Card
                    title="模型诊断"
                    extra={
                        <Button
                            type="primary"
                            onClick={renderRadarChart}
                        >
                            刷新
                        </Button>
                    }
                >
                    <div
                        ref={radarRef}
                        className={styles.chartItem}
                    />
                </Card>
            </div>
        </div>
    );
};
export default DashBoard;
